<template>
	 <el-table :data="tableData" style="width: 100%">
	    <el-table-column label="编号" prop="jobId"  width='80'/>
	    <el-table-column label="职位名称" prop="jobTitle"  width='120'/>
	    <el-table-column label="地址" prop="jobBase"  width='150'/>
	    <el-table-column label="基本薪资" prop="salary"  width='100'/>
	    <el-table-column label="职位职责" prop="jobContent"  width='150'/>
	    <el-table-column label="companny" prop="companyId"  width='100'/>
	     <el-table-column
	          prop="jobStatus"
	          label="状态"
	          width="100"
	        >
	          <template #default="scope">
	            <el-tag
	              :type="scope.row.jobStatus === '0' ? '' : 'success'"
	              disable-transitions
	              >{{ scope.row.jobStatus==1?'开启':'关闭' }}</el-tag
	            >
	          </template>
	        </el-table-column>
	    <el-table-column label="创建日期" prop="createDate" width='150' />
	    <el-table-column align="right">
	      <template #header>
	        <el-input v-model="search" size="small" placeholder="Type to search" />
	      </template>
	      <template #default="scope">
	        <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
	          >编辑</el-button
	        >
	        <el-button
	          size="small"
	          type="danger"
	          @click="handleDelete(scope.$index, scope.row)"
	          >删除</el-button
	        >
	      </template>
	    </el-table-column>
	  </el-table>
	   <el-pagination
	        v-model:current-page="page.current"
	        :page-size="page.size"
	        :page-sizes="page.sizeOption"
	        layout="->, total, sizes, prev, pager, next, jumper"
	        :total="page.totalCount"
	        style="margin-top: 20px"
	        @size-change="handleSizeChange"
	        @current-change="searchData(loadList)"
	      />
</template>

<script setup>
	import {reactive,ref,onMounted} from 'vue';
	import { useTable } from '@/hooks/useTable';
	// 引入接口Api
	import { getJobList } from '@/api/job';
	const search = ref('')
	const searchParam = reactive({ keyword: '' });
	// 使用自定义table hooks
	const { tableData, page, loading, loadList, handleSizeChange, searchData,} = useTable(getJobList);
	onMounted(()=>{
		searchData(loadList)
	})
</script>

<style>
</style>